<template>
  <view class="cases">
    <view 
      v-for="caseItem in safeCases" 
      :key="caseItem.id" 
      class="case-item"
      hover-class="item-hover"
      @click="onSelect(caseItem)"
    >
      <view class="case-content">
        <text class="case-title">{{ caseItem.title }}</text>
        <text class="case-description">{{ caseItem.description }}</text>
        <view class="case-meta">
          <uni-icons type="eye" size="14" color="rgba(255, 255, 255, 0.7)"></uni-icons>
          <text class="case-views">{{ caseItem.views }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

// 定义props
const props = defineProps({
  cases: {
    type: Array,
    default: () => []
  }
});

// 确保cases数组中的每个项目都具有必要的属性
const safeCases = computed(() => {
  return props.cases.map(caseItem => ({
    id: caseItem.id || Math.random().toString(36).substr(2, 9),
    title: caseItem.title || '未命名案例',
    description: caseItem.description || '暂无描述',
    views: caseItem.views !== undefined ? caseItem.views : 0
  }));
});

// 定义事件
const emit = defineEmits(['select']);

// 选择案例方法
const onSelect = (caseItem) => {
  emit('select', caseItem);
};
</script>

<style>
.cases {
  width: 100%;
}

.case-item {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 0, 255, 0.3);
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.case-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff00ff, transparent);
}

.item-hover {
  background-color: rgba(255, 0, 255, 0.1);
  transform: translateY(-2px);
}

.case-content {
  width: 100%;
}

.case-title {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.case-meta {
  display: flex;
  align-items: center;
}

.case-views {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 5px;
}
</style>